<template>
  <div id="addQuestionPage">
    <h2 style="margin-bottom: 32px">设置题目</h2>
    <a-form-item label="题目类型">
      <a-select v-model="questionType" placeholder="请选择题型">
        <a-option value="single">单选题</a-option>
        <a-option value="multi">多选题</a-option>
        <a-option value="fill">填空题</a-option>
        <a-option value="subjective">简答题</a-option>
      </a-select>
    </a-form-item>
    <a-form
      :model="questionContent"
      :style="{ width: '480px' }"
      label-align="left"
      auto-label-width
      @submit="handleSubmit"
    >
      <a-form-item label="应用 id">
        {{ appId }}
      </a-form-item>
      <a-form-item label="题目列表" :content-flex="false" :merge-props="false">
        <a-space size="medium">
          <a-button @click="addQuestion(questionContent.length)">
            底部添加题目
          </a-button>
          <!-- AI 生成抽屉 -->
          <AiGenerateQuestionDrawer
            :appId="appId"
            :onSuccess="onAiGenerateSuccess"
            :onSSESuccess="onAiGenerateSuccessSSE"
            :onSSEClose="onSSEClose"
            :onSSEStart="onSSEStart"
            :questionType="questionType"
          />
        </a-space>
        <!-- 遍历每道题目 -->
        <div v-for="(question, index) in questionContent" :key="index">
          <a-space size="large">
            <h3>题目 {{ index + 1 }}</h3>
            <a-button size="small" @click="addQuestion(index + 1)">
              添加题目
            </a-button>
            <a-button
              size="small"
              status="danger"
              @click="deleteQuestion(index)"
            >
              删除题目
            </a-button>
          </a-space>
          <a-form-item field="posts.post1" :label="`题目 ${index + 1} 标题`">
            <a-input v-model="question.title" placeholder="请输入标题" />
          </a-form-item>
          <!--  题目选项 -->
          <a-space size="large">
            <h4>题目 {{ index + 1 }} 选项列表</h4>
            <!-- 如果题目类型是单选或多选，则显示“添加选项”按钮 -->
            <a-button
              size="small"
              v-if="questionType === 'single' || questionType === 'multi'"
              @click="addQuestionOption(question, question.options.length)"
            >
              底部添加选项
            </a-button>

            <!-- 如果题目类型是其他类型（例如文本题目），则显示“添加答案”按钮 -->
            <a-button
              size="small"
              v-else
              @click="addQuestionOption(question, question.answers.length)"
            >
              底部添加答案
            </a-button>
          </a-space>
          <a-form-item
            v-for="(option, optionIndex) in filteredOptions(question)"
            :key="optionIndex"
            :label="`选项 ${optionIndex + 1}`"
            :content-flex="false"
            :merge-props="false"
          >
            <a-form-item label="选项序号">
              <a-input
                v-model="option.key"
                placeholder="请输入选项序号，如A，B"
              />
            </a-form-item>
            <a-form-item label="选项内容">
              <a-input v-model="option.value" placeholder="请输入选项内容" />
            </a-form-item>
            <a-form-item label="选项结果">
              <a-input
                v-model="option.result"
                placeholder="请输入选项得到结果"
              />
            </a-form-item>
            <a-form-item label="选项得分">
              <a-input-number
                v-model="option.score"
                placeholder="请输入选项得分"
              />
            </a-form-item>
            <a-space size="large">
              <a-button
                size="mini"
                @click="addQuestionOption(question, optionIndex + 1)"
              >
                添加选项
              </a-button>
              <a-button
                size="mini"
                status="danger"
                @click="deleteQuestionOption(question, optionIndex as any)"
              >
                删除选项
              </a-button>
            </a-space>
          </a-form-item>
          <!-- 题目选项结尾 -->
        </div>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 120px">
          提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect, withDefaults, computed , nextTick} from "vue";
import API from "@/api";
import { useRouter } from "vue-router";
import {
  addQuestionUsingPost,
  editQuestionUsingPost,
  listQuestionVoByPageUsingPost,
  deleteQuestionUsingPost,
} from "@/api/questionController";
import message from "@arco-design/web-vue/es/message";
import AiGenerateQuestionDrawer from "@/views/add/components/AiGenerateQuestionDrawer.vue";
import { getQuestionTypeByAppIdUsingGet } from "@/api/questionInformationController";
import {  Modal } from "@arco-design/web-vue";

interface Props {
  appId: string;
}
const questionType = ref<string>("single");

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
});

const router = useRouter();

// 题目内容结构（理解为题目列表）
const questionContent = ref<API.QuestionContentDTO[]>([]);

const filteredOptions = (question: API.QuestionContentDTO) => {
  if (questionType.value === "single" || questionType.value === "multi") {
    return question.options; // 返回 options 数组
  } else {
    return question.answers; // 返回 answers 数组
  }
};

/**
 * 添加题目
 * @param index
 */
const addQuestion = (index: number) => {
  nextTick(() => {
    console.log(questionType.value);
    const newQuestion: API.QuestionContentDTO = {
      title: "",
      type: questionType.value, // 添加题型
    };

    // 根据题型初始化对应的字段
    if (questionType.value === "fill" || questionType.value === "subjective") {
      newQuestion.answers = []; // 填空题和简答题初始化 answers
    } else {
      newQuestion.options = []; // 单选和多选题初始化 options
    }

    questionContent.value.splice(index, 0, newQuestion);
  })

};

/**
 * 删除题目
 * @param index
 */
const deleteQuestion = (index: number) => {
  questionContent.value.splice(index, 1);
};

/**
 * 添加题目选项
 * @param question
 * @param index
 */
const addQuestionOption = (question: API.QuestionContentDTO, index: number) => {
  if (questionType.value === "single" || questionType.value === "multi") {
    if (!question.options) {
      question.options = [];
    }
    question.options.splice(index, 0, {
      key: "",
      value: "",
    });
  } else {
    if (!question.answers) {
      question.answers = [];
    }
    question.answers.splice(index, 0, {
      key: "",
      value: "",
    });
    console.log("answers");
  }
};

/**
 * 删除题目选项
 * @param question
 * @param index
 */
const deleteQuestionOption = (
  question: API.QuestionContentDTO,
  index: number
) => {
  if (questionType.value === "single" || questionType.value === "multi") {
    if (!question.options) {
      question.options = [];
    }
    question.options.splice(index, 1);
  } else {
    if (!question.answers) {
      question.answers = [];
    }
    question.answers.splice(index, 1);
  }
};

const oldQuestion = ref<API.QuestionVO>();

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.appId) {
    return;
  }
  const res = await listQuestionVoByPageUsingPost({
    appId: props.appId as any,
    current: 1,
    pageSize: 1,
    sortField: "createTime",
    sortOrder: "descend",
  });
  if (res.data.code === 0 && res.data.data?.records) {
    oldQuestion.value = res.data.data?.records[0];
    if (oldQuestion.value) {
      questionContent.value = oldQuestion.value.questionContent ?? [];
    }
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

// 获取旧数据
watchEffect(() => {
  loadData();
});

/**
 * 提交
 */
const handleSubmit = async () => {
  if (!props.appId || !questionContent.value) {
    return;
  }
  const questionTypeRes = await getQuestionTypeByAppIdUsingGet({
    appId: props.appId as any,
  });
  if (questionTypeRes.data.code !== 0) {
    message.error("获取题型失败，" + questionTypeRes.data.message);
    return;
  }
  const dbQuestionType = questionTypeRes.data.data;
  let res: any;
  // 如果是修改
  // if (oldQuestion.value?.id) {
  //   res = await editQuestionUsingPost({
  //     id: oldQuestion.value.id,
  //     questionContent: questionContent.value,
  //   });
  // } else {
  //   // 创建
  //   res = await addQuestionUsingPost({
  //     appId: props.appId as any,
  //     type: questionType.value,
  //     questionContent: questionContent.value,
  //   });
  // }
  // if (oldQuestion.value?.id && oldQuestion.value?.type !== questionType.value) {
  //   // const confirmDelete = await message.confirm({
  //   //   content: "题型不一致，是否删除原题并重新添加？",
  //   //   okText: "删除",
  //   //   cancelText: "取消",
  //   // });
  //   try {
  //     await Modal.confirm({
  //       title: "请确认",
  //       content: "题型不一致，是否删除原题并重新添加？",
  //       okText: "删除",
  //       cancelText: "取消",
  //     });
  //   } catch {
  //     // 用户点了取消，直接 return
  //     return;
  //   }
  //   // if (!confirmDelete) return;
  //
  //   // 删除旧题目
  //   await deleteQuestionUsingPost({
  //     id: oldQuestion.value.id,
  //   });
  //
  //   // 创建新题目
  //   await addQuestionUsingPost({
  //     appId: props.appId as any,
  //     type: questionType.value,
  //     questionContent: questionContent.value,
  //   });
  // } else {
    // 如果是修改，且题型一致，直接编辑
    if (oldQuestion.value?.id) {
      res = await editQuestionUsingPost({
        id: oldQuestion.value.id,
        questionContent: questionContent.value,
      });
    } else {
      // 创建新题目
      res = await addQuestionUsingPost({
        appId: props.appId as any,
        type: questionType.value,
        questionContent: questionContent.value,
      });
    }
  // }
  if (res.data.code === 0) {
    message.success("操作成功，即将跳转到应用详情页");
    setTimeout(() => {
      router.push(`/app/detail/${props.appId}`);
    }, 3000);
  } else {
    message.error("操作失败，" + res.data.message);
  }
};

/**
 * AI 生成题目成功后执行
 */
const onAiGenerateSuccess = (result: API.QuestionContentDTO[]) => {
  message.success(`AI 生成题目成功，生成 ${result.length} 道题目`);
  questionContent.value = [...questionContent.value, ...result];
};

/**
 * AI 生成题目成功后执行（SSE）
 */
const onAiGenerateSuccessSSE = (result: API.QuestionContentDTO) => {
  questionContent.value = [...questionContent.value, result];
};

/**
 * SSE 开始生成
 * @param event
 */
const onSSEStart = (event: any) => {
  message.success("开始生成");
};

/**
 * SSE 生成完毕
 * @param event
 */
const onSSEClose = (event: any) => {
  message.success("生成完毕");
};
</script>
